<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件代理</title>
<body>
    <button>添加</button>
    <p>我是p0</p>
    <p class="">我是p1</p>
    <script>
        var count = 1;
        var btn = document.querySelector("button");
        // 获取按钮
        // 单击按钮在页面中添加一个p标签
        btn.addEventListener("click",e=>{
            var p = document.createElement("p");
            p.innerHTML=count+"标签p<br/>";
            document.body.append(p);
            // 这页面中插入p标签;
            count++;
        })
        //  手写个通用的事件代理方法
        // el 父选择器，type事件类型，selector子选择器,callback回调函数
        function on(el,type,selector,callback){
            var parent = document.querySelector(el); //获取到父元素          
            parent.addEventListener(type,e=>{
                var subs = parent.querySelectorAll(selector); // 获取到子元素            
                for(let i=0;i<subs.length;i++){
                    if(e.target===subs[i]){
                        // 事件目标等于当前子元素
                        callback(subs[i]);
                        break;
                    }
                }
            })
        }   

        on("body","click","p",elem=>{
            console.log(elem.innerHTML);
        })
      
    </script>
</body>
</html>